
let gifarr = [
  'https://qzonestyle.gtimg.cn/qzone/em/e121.gif',
  'https://qzonestyle.gtimg.cn/qzone/em/e100.gif',
  'https://qzonestyle.gtimg.cn/qzone/em/e151.gif',
  'https://qzonestyle.gtimg.cn/qzone/em/e183.gif',
  'https://qzonestyle.gtimg.cn/qzone/em/e114.gif',
  'https://qzonestyle.gtimg.cn/qzone/em/e7013.gif',  
  'https://qzonestyle.gtimg.cn/qzone/em/e128.gif', 
  'https://qzonestyle.gtimg.cn/qzone/em/e7024.gif',  
  'https://qzonestyle.gtimg.cn/qzone/em/e120.gif',  
  'https://qzonestyle.gtimg.cn/qzone/em/e113.gif', 
  'https://qzonestyle.gtimg.cn/qzone/em/e142.gif',  
  'https://qzonestyle.gtimg.cn/qzone/em/e122.gif',  
  'https://qzonestyle.gtimg.cn/qzone/em/e105@2x.gif',  
  'https://qzonestyle.gtimg.cn/qzone/em/e144.gif',  
  'https://qzonestyle.gtimg.cn/qzone/em/e154@2x.gif',  
  'https://qzonestyle.gtimg.cn/qzone/em/e199@2x.gif',
  'https://qzonestyle.gtimg.cn/qzone/em/e4012@2x.gif',
  'https://qzonestyle.gtimg.cn/qzone/em/e160.gif',
  'https://qzonestyle.gtimg.cn/qzone/em/e157.gif',
  'https://qzonestyle.gtimg.cn/qzone/em/e101.gif',
  'https://qzonestyle.gtimg.cn/qzone/em/e7063.gif',
  'https://qzonestyle.gtimg.cn/qzone/em/e7064.gif',
  'https://qzonestyle.gtimg.cn/qzone/em/e140@2x.gif',
  'https://qzonestyle.gtimg.cn/qzone/em/e103.gif',
  'https://qzonestyle.gtimg.cn/qzone/em/e103.gif',
  'https://qzonestyle.gtimg.cn/qzone/em/e4018.gif',
  'https://qzonestyle.gtimg.cn/qzone/em/e133.gif',
  'https://qzonestyle.gtimg.cn/qzone/em/e189.gif',
  'https://qzonestyle.gtimg.cn/qzone/em/e139.gif',
  'https://qzonestyle.gtimg.cn/qzone/em/e104@2x.gif',
  'https://qzonestyle.gtimg.cn/qzone/em/e132@2x.gif',
  'https://qzonestyle.gtimg.cn/qzone/em/e130@2x.gif',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
]



$(function(){

  let imgdom = ""
  gifarr.map(v=>{
    imgdom += `   <div class="item">
      <img src="${v}">
    </div>`
  })
  $(".img-list").html(imgdom)



  $("#comment-change").click(function(){
    let src = $("#comment-in").val()
    
    let arr = src.split("\n")
   
    let str = ""
    arr.map(v=>{
      let gerx = /(.*?)回复(.*?):(.*)/
      let gerx1 = /(.*?):(.*)/
     
      let match =  v.match(gerx)
      if (match){
        let name1 = match[1].trim()
        let name2 = match[2].trim()
        let c = match[3].trim()
        str += `<p><span style="color: #273f67;">${name1}</span>&nbsp;回复&nbsp;<span style="color: #273f67;">${name2}:</span> ${c}</p>\n`
        return
      }

      match =  v.match(gerx1)
      console.log(match)
      if(match){
        let name1 = match[1].trim()
        let c = match[2].trim()
        str += `<p><span style="color: #273f67;">${name1}:</span> ${c}</p>\n`;
      }
      
    })
    $("#bar").text(str)
    $("#comment-out").text(str)
    $(".btn").click()
    console.log(str)
    ShowTip("复制成功")
  })

  $("#main-in").click(function(){
    $(this).text("")
    $(this).val("")
  })

  $("#comment-in").click(function(){
    $(this).text("")
    $(this).val("")
  })

  $("#main-change").click(function(){
    let src = $("#main-in").val()

    let match = src.match(/\d+年\d+月\d+日/)
    let time = match[0]
    

    match = src.match(/赞\((\d+)\)/)
    let zan = 0 
    if(match){
      zan = match[1]
    }
     
    
    let str = `<section style="padding-top: 30px;margin-bottom: 30px;">
    <section pb="border-box" style="border-style: solid;border-width: 1px 1px 1px 6px;border-color: #9bc367;">
      <section pb="top-box" style="width: 95%;margin-top: -20px;display: flex;flex-flow: row nowrap;text-align: left;justify-content: flex-start;">
        <section pb="circle-box" style="margin-top: -8px;margin-right: -8px;">
          <section pb="circle" style="width: 16px; height: 16px; border-width: 2px; border-style: solid; border-color: rgb(255, 215, 106); border-radius: 125px;"></section>
        </section>
        <section pb="right-box" style="background-color: #9bc367;padding-bottom: 5px;flex:1;">
          <section pb="white-circle-box" style="margin-top: 4px;padding-left: 4px;">
            <section pb="white-circle" style="width: 8px;height: 8px;border-radius: 50%;background-color: white;">
            </section>
          </section>
          <section pb="text-box" style="font-size:16px; line-height: 1.3;color: white;padding-left:15px;padding-right:10px;">
            <p>2</p>
          </section>
        </section>
      </section>
      <section pb="bottom-box" style="padding-top:20px">
        <section pb="header-info" style="padding-left: 5px;">
          <section style="display: inline-block; width: 45px;vertical-align: top;border-radius: 50%;overflow: hidden;height: 50px;"><img data-ratio="1" style="width: 41px;border-radius: 50%;" src="https://mmbiz.qpic.cn/mmbiz_jpg/dOrlCicxJJjVy4QdkSANYbCgHNtE21HCJyaShSxQNRt2IrGiaT9icdXoIgKNrzJlcHicyUhkvPDicSyeanEYMqiapMKQ/0?wx_fmt=jpeg" data-type="jpeg"></section>
          <section pb="header-info" style="display: inline-block;vertical-align: top;line-height: 1.4;margin-left:4px;">
            <p pb="name" style="font-size:17px;">燃木</p>
            <p pb="time" style="font-size:13px;color: #8c8f9a;">${time}</p>
          </section>
        </section>
        <section pb="content" style="margin: 5px 10px 0 10px;padding-bottom: 15px; font-size: 16px;line-height:1.3;color: #24252b;border-bottom: 1px solid #f3f3f3;">
          <p></p>
          <section pb="img-box" style="margin-top: 10px;"><img data-ratio="1" style="width:100%" src=""></section>
        </section>
        <p style="color: #273f67;padding: 10px 0 0 10px;font-size: 14px;">${zan}人觉得很赞</p>
        <section pb="comment" style="padding: 10px;color: #24252b;line-height: 1.5;font-size: 14px;">
        
        </section>
      </section>
    </section>
  </section>`
    $("#bar").text(str)
    $("#main-out").text(str)
    $(".btn").click()
    console.log(str)
    ShowTip("复制成功")
  })


 
  var clipboard = new ClipboardJS('.btn');

  $(".item").click(function(){
    let src = $(this).find("img").attr("src")
    console.log(src)
    $("#bar").text(`<img data-ratio="1" style="vertical-align:middle;width:20px;" src="${src}">`)
    setTimeout(()=>{
      $(".btn").click()
    },20)
    //$(".btn").click()

    ShowTip("复制成功")
  })

  clipboard.on('success', function(e) {
      console.info('Action:', e.action);
      console.info('Text:', e.text);
      console.info('Trigger:', e.trigger);

      e.clearSelection();
      
  });

  clipboard.on('error', function(e) {
      console.error('Action:', e.action);
      console.error('Trigger:', e.trigger);
  });




  function ShowTip(tip, type) {
    var $tip = $('#tip');
    if ($tip.length == 0) {
    // 设置样式，也可以定义在css文件中
        $tip = $('<span id="tip" style="transform:translate(-50%,0%);position:fixed;top:10px;left: 50%;z-index:9999;height:28px; padding: 2px 16px;line-height: 28px;color:#fff;background:rgba(0,0,0,0.7);font-size:12px;border-radius:4px;"></span>');
        $('body').append($tip);
    }
    $tip.stop(true).prop('class', 'alert alert-' + type).text(tip).fadeIn(500).delay(1000).fadeOut(500);
}

})